<template>
	<view class="reservation-container">
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<uni-load-more status="loading" />
		</view>
		
		<block v-else>
			<!-- 表单部分 -->
			<view class="form-section">
				<view class="section-title">修改预约信息</view>
				
				<!-- 预约ID信息 -->
				<view class="reservation-id">
					<text>预约编号：{{ reservationId }}</text>
				</view>
				
				<!-- 新的日期选择器 - 7天选择器 -->
				<view class="date-picker-section">
					<view class="date-picker-title">
						<uni-icons type="calendar" size="18" color="#666"></uni-icons>
						<text>选择参观日期（仅可预约7天内）</text>
					</view>
					<view class="date-picker-container">
						<scroll-view scroll-x="true" class="date-scroll" show-scrollbar="false">
							<view class="date-list">
								<view 
									v-for="(day, index) in availableDates" 
									:key="index" 
									class="date-item" 
									:class="{
										'selected': formData.visitDate === day.date,
										'disabled': day.availableCount === 0
									}"
									@click="selectDate(day)"
								>
									<view class="date-weekday">{{ getWeekday(day.date) }}</view>
									<view class="date-day">{{ getDay(day.date) }}</view>
									<view class="date-month">{{ getMonth(day.date) }}月</view>
									<view class="date-tickets" :class="{'tickets-low': day.availableCount > 0 && day.availableCount <= 20, 'tickets-none': day.availableCount === 0}">
										<text v-if="day.availableCount > 0">余{{ day.availableCount }}票</text>
										<text v-else>已满</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				
				<!-- 预约时间段 -->
				<view class="form-item">
					<view class="form-label">
						<text>参观时间</text>
					</view>
					<view class="form-content">
						<picker :value="timeSlotIndex" :range="timeSlots" @change="onTimeSlotChange">
							<view class="picker-value">
								<text :class="{'placeholder': !timeSlots[timeSlotIndex], 'selected': timeSlots[timeSlotIndex]}">
									{{timeSlots[timeSlotIndex] || '请选择参观时间'}}
								</text>
							</view>
						</picker>
					</view>
				</view>
				
				<!-- 参观人数 -->
				<view class="form-item">
					<view class="form-label">
						<text>参观人数</text>
					</view>
					<view class="form-content">
						<view class="counter">
							<view class="btn minus" @click="decreaseCount" :class="{'disabled': formData.visitorCount <= 1}">
								<view class="minus-icon">-</view>
							</view>
							<view class="count">{{formData.visitorCount}}</view>
							<view class="btn plus" @click="increaseCount" :class="{'disabled': formData.visitorCount >= 5 || (formData.visitDate && availableDates.find(d => d.date === formData.visitDate)?.availableCount < formData.visitorCount + 1)}">
								<view class="plus-icon">+</view>
							
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 简化的观众信息部分 -->
			<view class="visitor-section">
				<view class="section-header">
					<view class="section-title">观众信息</view>
					<view class="section-action" @click="goToAddVisitor">
						<uni-icons type="plusempty" size="16" color="#1aad19"></uni-icons>
						<text>添加</text>
					</view>
				</view>
				
				<view class="visitor-list" v-if="visitors.length > 0">
					<view 
						class="visitor-item" 
						v-for="(item, index) in visitors" 
						:key="index"
						:class="{active: selectedVisitors.includes(item.id)}"
						@click="toggleVisitor(item.id)"
					>
						<view class="visitor-info">
							<view class="visitor-name">{{item.name}}</view>
							<view class="visitor-id-card">{{formatIdCard(item.idCard)}}</view>
						</view>
						<view class="visitor-checkbox">
							<uni-icons :type="selectedVisitors.includes(item.id) ? 'checkbox-filled' : 'circle'" size="22" :color="selectedVisitors.includes(item.id) ? '#1aad19' : '#ddd'"></uni-icons>
						</view>
					</view>
				</view>
				
				<!-- 显示选中的观众详情信息 -->
				<view class="selected-visitors" v-if="selectedVisitorsDetail.length > 0">
					<view class="section-subtitle">已选择的观众</view>
					<view class="selected-visitors-list">
						<view 
							class="selected-visitor-item" 
							v-for="(item, index) in selectedVisitorsDetail" 
							:key="index"
						>
							<view class="visitor-info">
								<view class="visitor-primary-info">
									<text class="visitor-name">{{item.name}}</text>
									<text class="visitor-badge">已选</text>
								</view>
								<view class="visitor-secondary-info">
									<text class="info-label">证件号:</text>
									<text class="info-value">{{formatIdCard(item.idCard)}}</text>
								</view>
								<view class="visitor-secondary-info" v-if="item.phone">
									<text class="info-label">手机号:</text>
									<text class="info-value">{{formatPhone(item.phone)}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="empty-visitors" v-else-if="visitors.length === 0">
					<text>请添加观众信息</text>
					<view class="add-btn" @click="goToAddVisitor">
						<uni-icons type="plusempty" size="16" color="#1aad19"></uni-icons>
						<text>添加观众</text>
					</view>
				</view>
				
				<view class="visitor-tip" v-if="visitors.length > 0">
					<text class="error" v-if="selectedVisitors.length > formData.visitorCount">已选择人数超过预约人数，请调整</text>
					<text v-else-if="selectedVisitors.length < formData.visitorCount">请选择 {{formData.visitorCount}} 位观众</text>
					<text v-else-if="selectedVisitors.length === formData.visitorCount">已选择 {{selectedVisitors.length}} 位观众</text>
				</view>
			</view>
			
			<!-- 预约须知 -->
			<view class="notice-section">
				<view class="section-title">修改须知</view>
				<view class="notice-content">
					<view class="notice-item">
						<view class="dot"></view>
						<text>一次最多可预约5人。</text>
					</view>
					<view class="notice-item">
						<view class="dot"></view>
						<text>只能修改未确认的预约。</text>
					</view>
					<view class="notice-item">
						<view class="dot"></view>
						<text>参观时请携带身份证件，一人一证。</text>
					</view>
					<view class="notice-item">
						<view class="dot"></view>
						<text>如需取消预约，请返回列表操作。</text>
					</view>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-section">
				<button class="submit-btn" @click="submitEdit" :disabled="!isFormValid" :class="{'btn-active': isFormValid}">
					<text>保存修改</text>
				</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { getVisitorList } from '@/api/visitor.js';
	import { getReservationById, updateReservation, getTimeSlots, getTicketAvailabilityInfo, getReservationVisitorsDetail } from '@/api/reservation.js';
	import { getMuseumInfo } from '@/api/system.js';
	
	export default {
		data() {
			return {
				loading: true,
				reservationId: '', // 预约ID
				originalReservation: {}, // 原始预约数据
				visitors: [],
				selectedVisitors: [], // 选中的观众ID
				selectedVisitorsDetail: [], // 选中观众的详细信息
				timeSlots: [],  // 初始化为空数组，将从后端获取
				timeSlotIndex: 0,
				formData: {
					visitDate: '',
					visitorCount: 1
				},
				today: new Date().toISOString().split('T')[0],  // 今天的日期，格式：YYYY-MM-DD
				availableDates: [],  // 可预约日期列表
                maxTicketsL:0,
				museumInfo: {},
				maxVisitors: 5,
				submitLoading: false,
			}
		},
		computed: {
			// 判断表单是否有效
			isFormValid() {
				return this.formData.visitDate && 
					   this.timeSlotIndex !== null &&
					   this.formData.visitorCount > 0 && 
					   this.selectedVisitors.length > 0 &&
					   this.selectedVisitors.length === this.formData.visitorCount;
			}
		},
		onLoad(options) {
			// 从参数中获取预约ID
			if (options && options.id) {
				this.reservationId = options.id;
				this.loadMuseumInfo();
				this.loadReservationData(options.id);
				this.loadVisitors();
				this.generateAvailableDates();
			} else {
				uni.showToast({
					title: '缺少预约ID',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		// 添加onShow生命周期，确保从添加观众页面返回时刷新数据
		onShow() {
			// 重新加载观众列表，确保添加新观众后数据及时更新
			if (this.reservationId) {
				this.loadVisitors();
			}
		},
		methods: {
			// 加载预约数据
			async loadReservationData(id) {
				this.loading = true;
				try {
					const res = await getReservationById(id);
                    console.log(res);
					
					if (res.code === 200 && res.data) {
						this.originalReservation = res.data;
                          
						// 初始化表单数据
						this.formData.visitDate = res.data.visit_date;
						this.formData.visitorCount = res.data.visitor_count;
						
						// 获取预约的观众详情
						await this.loadReservationVisitors(id);
						
						// 初始化时间段
						this.timeSlots = ['上午 9:00-12:00', '下午 13:00-16:00'];
						this.timeSlotIndex = this.timeSlots.findIndex(slot =>{
                            if(slot==res.data.visit_time_slot){
                                return slot;
                            }
                            return false;
                        }) || 0;
						console.log(this.timeSlotIndex);
						
						// 检查预约状态，只允许修改待审核的预约
						if (res.data.status !== 0) {
							uni.showToast({
								title: '只能修改待审核的预约',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					}
				} catch (error) {
					console.error('获取预约信息失败', error);
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} finally {
					this.loading = false;
				}
			},
			
			// 加载预约观众详情
			async loadReservationVisitors(reservationId) {
				try {
					const result = await getReservationVisitorsDetail(reservationId);
					if (result.code === 200 && result.data) {
						this.selectedVisitorsDetail = result.data;
						
						// 提取观众ID到selectedVisitors数组
						this.selectedVisitors = this.selectedVisitorsDetail.map(visitor => visitor.id);
						
						console.log('已加载观众详情:', this.selectedVisitorsDetail);
					} else {
						console.error('获取预约观众详情失败:', result.message);
						// 如果获取详情失败，尝试使用原始预约数据中的观众ID
						if (this.originalReservation.visitors) {
							this.selectedVisitors = [...this.originalReservation.visitors];
						}
					}
				} catch (error) {
					console.error('获取预约观众详情出错:', error);
					// 出错时使用原始预约数据中的观众ID
					if (this.originalReservation.visitors) {
						this.selectedVisitors = [...this.originalReservation.visitors];
					}
				}
			},
			
			// 加载博物馆信息
			async loadMuseumInfo() {
				try {
					const res = await getMuseumInfo();
					if (res.code === 200 && res.data) {
						this.museumInfo = res.data;
					}
				} catch (error) {
					console.error('获取博物馆信息失败', error);
				}
			},
			
			// 加载常用观众
			async loadVisitors() {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.id) return;
				
				try {
					const res = await getVisitorList(userInfo.id);
					if (res.data) {
						this.visitors = res.data;
					}
				} catch (error) {
					console.error('获取常用观众失败', error);
				}
			},
			
			// 生成未来7天的可预约日期
			async generateAvailableDates() {
				const dates = [];
				const today = new Date();
				const todayFormatted = this.formatDate(today);
				const tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				
				for (let i = 0; i < 7; i++) {
					const date = new Date(tomorrow);
					date.setDate(date.getDate() + i);
					
					const formattedDate = this.formatDate(date);
					// 确保不包含今天的日期
					if (formattedDate !== todayFormatted) {
						dates.push({
							date: formattedDate,
							availableCount: 0,  // 初始化为0，后续会更新
							weekday: date.getDay()
						});
					}
				}
				
				this.availableDates = dates;
				
				// 获取票务可用情况
				await this.fetchTicketAvailability();
			},
			
			// 获取可用票数
			async fetchTicketAvailability() {
				if (this.availableDates.length === 0) return;
				
				try {
					// 调用API获取票务可用情况
					const res = await getTicketAvailabilityInfo();
					console.log(res);
					
					if (res.code === 200 && res.data) {
						// 服务器返回的是对象格式 {日期: 可用数量}
						const apiAvailableDates = res.data.availableDates || {};
						this.maxTicketsL = res.data.maxDailyReservation || 200;
						
						// 将API返回的对象格式转换为日期对象数组
						const dates = [];
						const today = new Date();
						const todayFormatted = this.formatDate(today);
						const tomorrow = new Date();
						tomorrow.setDate(tomorrow.getDate() + 1);
						
						// 获取API返回的日期范围，只保留未来7天
						const returnedDates = Object.keys(apiAvailableDates).sort();
						
						// 使用返回的日期创建可用日期数组，排除今天的日期
						for (let i = 0; i < Math.min(returnedDates.length, 7); i++) {
							const dateStr = returnedDates[i];
							// 跳过今天的日期
							if (dateStr === todayFormatted) continue;
							
							const availableCount = apiAvailableDates[dateStr] || 0;
							
							const date = new Date(dateStr);
							if (!isNaN(date.getTime())) {
								dates.push({
									date: dateStr,
									availableCount: availableCount,
									available: availableCount,
									weekday: date.getDay()
								});
							}
						}
						
						if (dates.length > 0) {
							this.availableDates = dates;
							
							// 如果当前选择日期不在可用日期里，选择第一个可用日期
							if (!this.formData.visitDate || !this.availableDates.find(d => d.date === this.formData.visitDate)) {
								const firstAvailableDate = this.availableDates.find(d => d.availableCount > 0);
								if (firstAvailableDate) {
									this.formData.visitDate = firstAvailableDate.date;
									this.loadAvailableTimeSlots(firstAvailableDate.date);
								}
							}
							
							// 如果是当前选中的日期，增加可预约人数
							// 因为编辑时，之前预约的人数应该算入可用数量中
							const selectedDate = this.availableDates.find(d => d.date === this.formData.visitDate);
							if (selectedDate) {
								selectedDate.availableCount += this.originalReservation.visitorCount || 0;
								selectedDate.available = selectedDate.availableCount;
							}
						}
					} else {
						// API请求成功但返回数据不符合预期，使用模拟数据
						this.generateMockAvailability();
					}
				} catch (error) {
					console.error('获取票务可用情况失败', error);
					// 使用模拟数据
					this.generateMockAvailability();
				} finally {
					// 确保加载状态结束
					this.loading = false;
				}
			},
			
			// 生成模拟数据
			generateMockAvailability() {
				const maxTickets = 200; // 每日最大票数
				const usedTickets = {
					0: 15,  // 周日
					1: 30,  // 周一 
					2: 25,  // 周二
					3: 40,  // 周三
					4: 50,  // 周四
					5: 70,  // 周五
					6: 100, // 周六
				};
				
				// 获取今天的日期格式
				const today = new Date();
				const todayFormatted = this.formatDate(today);
				
				this.availableDates.forEach(day => {
					// 确保不处理今天的日期
					if (day.date === todayFormatted) return;
					
					const date = new Date(day.date);
					const weekday = date.getDay();
					const used = usedTickets[weekday];
					day.availableCount = maxTickets - used;
					day.available = day.availableCount;
					
					// 如果是当前选中的日期，增加可预约人数
					// 因为编辑时，之前预约的人数应该算入可用数量中
					if (day.date === this.formData.visitDate) {
						day.availableCount += this.originalReservation.visitorCount || 0;
						day.available = day.availableCount;
					}
				});
			},
			
			// 选择日期
			selectDate(day) {
				if (day.availableCount === 0) return; // 不可选择已满的日期
				
				this.formData.visitDate = day.date;
				this.loadAvailableTimeSlots(day.date);
				
				// 如果当前选择的人数超过可用票数，自动调整
				const availableCount = day.availableCount;
				if (this.formData.visitorCount > availableCount) {
					this.formData.visitorCount = availableCount;
					
					// 调整已选择的观众
					if (this.selectedVisitors.length > this.formData.visitorCount) {
						this.selectedVisitors = this.selectedVisitors.slice(0, this.formData.visitorCount);
					}
				}
			},
			
			// 格式化日期
			formatDate(date) {
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			
			// 获取星期几
			getWeekday(dateStr) {
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const date = new Date(dateStr);
				return weekdays[date.getDay()];
			},
			
			// 获取日期中的天
			getDay(dateStr) {
				return dateStr.split('-')[2];
			},
			
			// 获取日期中的月
			getMonth(dateStr) {
				return parseInt(dateStr.split('-')[1]);
			},
			
			// 格式化身份证号
			formatIdCard(idCard) {
				if (!idCard) return '';
				return idCard.replace(/^(.{6})(.*)(.{4})$/, '$1********$3');
			},
			
			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return '';
				return phone.replace(/^(.{3})(.*)(.{4})$/, '$1****$3');
			},
			
			// 加载可用时间段
			async loadAvailableTimeSlots(date) {
				uni.showLoading({
					title: '加载时间段...'
				});
				
				// 模拟时间段数据
				this.timeSlots = ['上午 9:00-12:00', '下午 13:00-16:00'];
				// 如果原始预约的时间段存在于时间段列表中，则选中它
				const originalTimeSlotIndex = this.timeSlots.findIndex(slot => slot === this.originalReservation.visit_time_slot);
				this.timeSlotIndex = originalTimeSlotIndex !== -1 ? originalTimeSlotIndex : 0;
				
				uni.hideLoading();
			},
			
			// 时间段选择回调
			onTimeSlotChange(e) {
				this.timeSlotIndex = e.detail.value;
			},
			
			// 减少人数
			decreaseCount() {
				if (this.formData.visitorCount > 1) {
					this.formData.visitorCount--;
					
					// 如果选择的观众比当前人数多，需要减少选中的观众
					if (this.selectedVisitors.length > this.formData.visitorCount) {
						this.selectedVisitors.pop(); // 移除最后一个
					}
				}
			},
			
			// 增加人数
			increaseCount() {
				// 检查是否有足够的票数
				const selectedDay = this.availableDates.find(day => day.date === this.formData.visitDate);
				const maxVisitors = selectedDay ? selectedDay.availableCount : 5;
				
				if (this.formData.visitorCount < 5 && this.formData.visitorCount < maxVisitors) {
					this.formData.visitorCount++;
				} else if (this.formData.visitorCount >= maxVisitors) {
					uni.showToast({
						title: `最多可预约${maxVisitors}人`,
						icon: 'none'
					});
				}
			},
			
			// 切换选择观众
			toggleVisitor(id) {
				const index = this.selectedVisitors.indexOf(id);
				if (index === -1) {
					// 如果当前选择人数已满，替换最早选择的一个
					if (this.selectedVisitors.length >= this.formData.visitorCount) {
						this.selectedVisitors.shift(); // 移除第一个
					}
					this.selectedVisitors.push(id);
				} else {
					this.selectedVisitors.splice(index, 1);
				}
			},
			
			// 跳转到添加观众页面
			goToAddVisitor() {
				uni.navigateTo({
					url: '/pages/my/visitor-list/index?mode=select'
				});
			},
			
			// 提交修改
			async submitEdit() {
				if (!this.isFormValid) {
					uni.showToast({
						title: '请完成所有必填信息',
						icon: 'none'
					});
					return;
				}
				
				if (this.submitLoading) return; // 防止重复提交
				
				this.submitLoading = true;
				uni.showLoading({
					title: '保存修改中...'
				});
				
				try {
					const userInfo = uni.getStorageSync('userInfo');
					if (!userInfo || !userInfo.id) {
						throw new Error('用户未登录');
					}
					
					// 检查是否有实际修改
					const isDateChanged = this.formData.visitDate !== this.originalReservation.visit_date;
					const isTimeSlotChanged = this.timeSlots[this.timeSlotIndex] !== this.originalReservation.visit_time_slot;
					const isVisitorCountChanged = this.formData.visitorCount !== this.originalReservation.visitor_count;
					
					// 使用JSON.stringify比较观众ID数组
					let originalVisitorIds = this.originalReservation.visitors || [];
					if (!Array.isArray(originalVisitorIds)) {
						// 如果不是数组，尝试从selectedVisitorsDetail中提取
						originalVisitorIds = Array.isArray(this.selectedVisitorsDetail) 
							? this.selectedVisitorsDetail.map(v => v.id) 
							: [];
					}
					
					const isVisitorsChanged = JSON.stringify(this.selectedVisitors.sort()) !== JSON.stringify([...originalVisitorIds].sort());
					
					if (!isDateChanged && !isTimeSlotChanged && !isVisitorCountChanged && !isVisitorsChanged) {
						// 没有修改，直接返回
						uni.showToast({
							title: '未检测到修改',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
						return;
					}
					
					// 构建修改后的预约数据
					const updateData = {
						id: this.reservationId,
						userId: userInfo.id,
						visitorCount: this.formData.visitorCount,
						visitDate: this.formData.visitDate,
						visitTimeSlot: this.timeSlots[this.timeSlotIndex],
						visitors: this.selectedVisitors
					};
					
					// 实际API调用
					const res = await updateReservation(updateData);
					
					if (res.code === 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						
						// 返回预约列表页面
						setTimeout(() => {
							// 返回上一页并刷新列表
							const pages = getCurrentPages();
							const prevPage = pages[pages.length - 2];
							
							// 触发上一页的刷新方法
							if (prevPage && prevPage.$vm.loadReservations) {
								prevPage.$vm.loadReservations();
							}
							
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error(res.message || '修改失败');
					}
				} catch (error) {
					console.error('提交预约修改失败', error);
					uni.showToast({
						title: error.message || '修改失败，请稍后重试',
						icon: 'none'
					});
				} finally {
					this.submitLoading = false;
					uni.hideLoading();
				}
			},
		}
	}
</script>

<style lang="scss">
	.reservation-container {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 140rpx;
		
		.loading {
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
		}
		
		.reservation-id {
			background-color: #f0f9eb;
			padding: 16rpx 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			
			text {
				font-size: 26rpx;
				color: #67c23a;
			}
		}
		
		.nav-back {
			position: fixed;
			top: 40rpx;
			left: 30rpx;
			z-index: 100;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 24rpx;
			position: relative;
			display: inline-block;
		}
		
		.form-section, .visitor-section, .notice-section {
			margin: 20rpx 30rpx 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		}
		
		/* 日期选择器样式 */
		.date-picker-section {
			margin-bottom: 20rpx;
			
			.date-picker-title {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				
				uni-icons {
					margin-right: 10rpx;
				}
			}
			
			.date-picker-container {
				width: 100%;
				overflow: hidden;
				border-radius: 16rpx;
			}
			
			.date-scroll {
				width: 100%;
				white-space: nowrap;
			}
			
			.date-list {
				display: flex;
				padding: 10rpx 0;
			}
			
			.date-item {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				height: 180rpx;
				margin-right: 16rpx;
				background-color: #f8f8f8;
				border-radius: 12rpx;
				padding: 16rpx 0;
				transition: all 0.2s;
				
				&:first-child {
					margin-left: 0;
				}
				
				&.selected {
					background-color: rgba(26, 173, 25, 0.1);
					border: 2rpx solid #1aad19;
				}
				
				&.disabled {
					opacity: 0.6;
					background-color: #f0f0f0;
				}
				
				.date-weekday {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.date-day {
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 4rpx;
				}
				
				.date-month {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.date-tickets {
					font-size: 22rpx;
					color: #1aad19;
					padding: 4rpx 12rpx;
					background-color: rgba(26, 173, 25, 0.08);
					border-radius: 20rpx;
					
					&.tickets-low {
						color: #ff9900;
						background-color: rgba(255, 153, 0, 0.08);
					}
					
					&.tickets-none {
						color: #ff3b30;
						background-color: rgba(255, 59, 48, 0.08);
					}
				}
			}
		}
		
		.form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1px solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.form-label {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				
				uni-icons {
					margin-right: 10rpx;
				}
			}
			
			.form-content {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				
				.placeholder {
					color: #999;
				}
				
				.selected {
					color: #1aad19;
					font-weight: 500;
				}
				
				.date-picker, .picker-value {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					background-color: #f9f9f9;
					border-radius: 10rpx;
					
					uni-icons {
						margin-left: 10rpx;
					}
				}
				
				.counter {
					display: flex;
					align-items: center;
					background-color: #f9f9f9;
					border-radius: 10rpx;
					padding: 2rpx;
					
					.btn {
						width: 50rpx;
						height: 50rpx;
						border-radius: 8rpx;
						background: linear-gradient(to bottom right, #1aad19, #2dbb2d);
						display: flex;
						align-items: center;
						justify-content: center;
						
						&.disabled {
							background: linear-gradient(to bottom right, #ccc, #ddd);
							opacity: 0.7;
						}
					}
					
					.count {
						min-width: 60rpx;
						text-align: center;
						font-size: 30rpx;
						font-weight: bold;
						margin: 0 15rpx;
						color: #333;
					}
				}
			}
		}
		
		.visitor-section {
			.section-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				
				.section-action {
					font-size: 26rpx;
					color: #1aad19;
					display: flex;
					align-items: center;
					padding: 6rpx 16rpx;
					background-color: rgba(26, 173, 25, 0.08);
					border-radius: 30rpx;
					
					text {
						margin-left: 4rpx;
					}
				}
			}
			
			.visitor-list {
				margin-bottom: 20rpx;
				
				.visitor-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx;
					margin-bottom: 12rpx;
					background-color: #f9f9f9;
					border-radius: 12rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					&.active {
						background-color: rgba(26, 173, 25, 0.08);
					}
					
					.visitor-info {
						.visitor-name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 6rpx;
						}
						
						.visitor-id-card {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
			
			.selected-visitors {
				margin-bottom: 20rpx;
				
				.section-subtitle {
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
				}
				
				.selected-visitors-list {
					.selected-visitor-item {
						padding: 20rpx;
						margin-bottom: 12rpx;
						background-color: #f9f9f9;
						border-radius: 12rpx;
						
						.visitor-info {
							.visitor-primary-info {
								display: flex;
								align-items: center;
								margin-bottom: 6rpx;
								
								.visitor-name {
									font-size: 28rpx;
									font-weight: bold;
									color: #333;
								}
								
								.visitor-badge {
									font-size: 24rpx;
									color: #1aad19;
									background-color: rgba(26, 173, 25, 0.08);
									padding: 4rpx 12rpx;
									border-radius: 20rpx;
									margin-left: 10rpx;
								}
							}
							
							.visitor-secondary-info {
								.info-label {
									font-size: 24rpx;
									color: #999;
									margin-right: 10rpx;
								}
								
								.info-value {
									font-size: 24rpx;
									color: #333;
								}
							}
						}
					}
				}
			}
			
			.empty-visitors {
				padding: 40rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				text {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 20rpx;
				}
				
				.add-btn {
					padding: 12rpx 30rpx;
					background-color: rgba(26, 173, 25, 0.08);
					color: #1aad19;
					border-radius: 30rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					
					text {
						margin: 0 0 0 6rpx;
						color: #1aad19;
						font-size: 26rpx;
					}
				}
			}
			
			.visitor-tip {
				font-size: 24rpx;
				color: #1aad19;
				text-align: center;
				padding: 12rpx;
				background-color: rgba(26, 173, 25, 0.05);
				border-radius: 8rpx;
				margin-top: 16rpx;
				
				.error {
					color: #ff3b30;
				}
			}
		}
		
		.notice-section {
			.notice-content {
				.notice-item {
					display: flex;
					margin-bottom: 16rpx;
					font-size: 26rpx;
					color: #666;
					
					.dot {
						width: 12rpx;
						height: 12rpx;
						border-radius: 6rpx;
						background-color: #1aad19;
						margin-top: 12rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
		
		.submit-section {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
			
			.submit-btn {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background: #ddd;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				border-radius: 45rpx;
				
				&.btn-active {
					background: linear-gradient(to right, #1aad19, #4cd964);
					box-shadow: 0 4rpx 12rpx rgba(26, 173, 25, 0.2);
				}
				
				&[disabled] {
					background: #ddd;
					color: #fff;
					box-shadow: none;
				}
			}
		}
	}
</style> 